<template>
   <div class="archived-task-list-page">
      <div class="operation-bar">
         <el-input v-model="searchKeyword" placeholder="请输入关键词搜索" size="small" clearable @clear="handleSearch"
            @keyup.enter.native="handleSearch" style="width: 250px" />
         <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
      </div>

      <div class="table-wrapper">
         <el-table :data="tableData" stripe :row-key="row => row.id" class="table-content">
            <el-table-column prop="id" label="任务ID" header-align="center" align="center" width="90" />
            <el-table-column prop="parent_id" label="父任务ID" header-align="center" align="center" width="90" />
            <el-table-column prop="username" label="任务发布者" header-align="center" align="center" width="120" />
            <el-table-column prop="title" label="任务标题" header-align="center" align="center" />
            <el-table-column label="操作" header-align="center" align="center" width="100">
               <template #default="{ row }">
                  <el-button type="info" size="small" @click="handleView(row)">详情</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>

      <div class="pagination-container">
         <el-pagination background layout="sizes, prev, pager, next, jumper, ->, total" :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize" :current-page="currentPage" :total="total" @current-change="handlePageChange"
            @size-change="handleSizeChange" />
      </div>
   </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getTasksAPI } from '@/api/task' // 假设已有接口，支持归档状态过滤

const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])

const router = useRouter()

const fetchData = async () => {
   try {
      const params = {
         page: currentPage.value,
         page_size: pageSize.value,
         keyword: searchKeyword.value,
         status: 'archived',  // 只拉取归档任务
      }
      const res = await getTasksAPI(params)
      total.value = res.total
      tableData.value = res.tasks
   } catch (error) {
      console.error('获取归档任务失败', error)
   }
}

const handleSearch = () => {
   currentPage.value = 1
   fetchData()
}

const handlePageChange = (page) => {
   currentPage.value = page
   fetchData()
}

const handleSizeChange = (size) => {
   pageSize.value = size
   currentPage.value = 1
   fetchData()
}

const handleView = (row) => {
   router.push(`/harborSpace/trace/task/${row.id}`)
}

onMounted(() => {
   fetchData()
})
</script>

<style scoped>
.archived-task-list-page {
   .operation-bar {
      margin-bottom: 15px;
      display: flex;
      gap: 10px;
      align-items: center;
   }

   .table-wrapper {
      overflow-x: auto;
   }

   .table-content {
      min-width: 700px;
   }

   .pagination-container {
      margin-top: 20px;
      text-align: right;
   }
}
</style>
